<template>
  <div>
    <el-dialog
      :visible.sync="positionVisible.v"
      width="84%"
      top="4%"
      @open="mapInit()"
      v-dialogDrag>
      <div id="map" ref="map" class="map-div"></div>
      <div>
        <form class="form-inline">
          <label style="font-size:16px;">Select Area &nbsp;</label>
          <!--<select id="type" @click="addInteraction" v-model="type" ref="selectType">-->
          <!--<option value="Square">Square</option>-->
          <!--<option value="Polygon">Polygon</option>-->
          <!--</select>-->
          <el-select id="type" v-model="type" placeholder="请选择" @click="addInteraction">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-button icon="el-icon-close" type="danger" circle @click="isClear"></el-button>
          <el-button icon="el-icon-check" type="success" circle @click="confirmPosition"></el-button>
        </form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import "openlayers/dist/ol-debug.js";

  let source = new ol.source.Vector({wrapX: false});
  let vector = new ol.layer.Vector({
    source: source
  });
  let draw;

  export default {
    name: "position-dialog",
    data() {
      return {
        map: null,
        type: '',
        options: [{
          value: 'Square',
          label: 'Square'
        }, {
          value: 'Polygon',
          label: 'Polygon'
        }],
        featureArray: []
      }
    },
    props: {
      positionVisible: Object,
    },
    methods: {
      mapInit() {
        this.$nextTick(function () {
          let that = this;
          that.$refs.map.innerText = null;
          let gaode_layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
              url: 'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
            }),
            projection: 'EPSG:3857'
          });
          that.map = new ol.Map({
            target: 'map',
            layers: [gaode_layer, vector],
            view: new ol.View({
              center: ol.proj.transform([116.4, 39.9], 'EPSG:4326', 'EPSG:3857'),//初始化中心为北京
              zoom: 10,
              minZoom: 3,
              maxZoom: 18
            }),
            controls: ol.control.defaults({
              attributionOptions: {collapsible: false},
              rotateOptions: {className: 'custom-rotate'}
            }).extend([
              new ol.control.OverviewMap({
                collapsible: false,
                collapsed: false,
                className: 'custom-overview-map'
              }),
              new ol.control.ScaleLine({units: 'metric'}),
              new ol.control.FullScreen({className: 'custom-fullscreen'}),
              new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(4),
                projection: 'EPSG:4326',
                className: 'custom-mouse-position'
              })
            ]),
            logo: false
          }); //Map初始化
          //去掉鹰眼的放大缩小按钮
          that.map.controls.array_[3].element.lastElementChild.style.display = "none";
        })
      },
      addInteraction() {
        let that = this;
        let typeValue;
        let geometryFunction;
        this.map.removeInteraction(draw);
        // geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
        if (this.type === 'Square') {
          typeValue = 'Circle';
          geometryFunction = ol.interaction.Draw.createBox();
          draw = new ol.interaction.Draw({
            source: source,
            type: typeValue,
            geometryFunction: geometryFunction
          });
        } else if (this.type === 'Polygon') {
          typeValue = 'Polygon';
          draw = new ol.interaction.Draw({
            source: source,
            type: typeValue
          });
        }
        // this.map.removeInteraction(draw);
        draw.on('drawend', function (evt) {
          let feature = evt.feature;
          that.featureArray.push(feature);

          //获取四至

          // let geometry = feature.getGeometry();
          // console.log(geometry)
          // let lonLat1 = [geometry.extent_[0], geometry.extent_[1]];
          // let lonLat2 = [geometry.extent_[2], geometry.extent_[3]];
          // let cor1 = ol.proj.transform(lonLat1, new ol.proj.Projection({code: 'EPSG:900913'}),
          //   new ol.proj.Projection({code: 'EPSG:4326'}));
          // let cor2 = ol.proj.transform(lonLat2, new ol.proj.Projection({code: 'EPSG:900913'}),
          //   new ol.proj.Projection({code: 'EPSG:4326'}));
          // coordinate = cor1.concat(cor2);
          // for (let opp = 0; opp < 4; opp++) {
          //   coordinate[opp] = coordinate[opp].toFixed(9)
          // }

          // coordinate = coordinate.toString();
        });
        this.map.addInteraction(draw);
        // }else{
        //   source.clear();
      },
      isClear() {
        this.featureArray = [];
        source.clear();
      },
      confirmPosition() {
        let wkt = new ol.format.WKT().writeFeatures(this.featureArray, {
          dataProjection: 'EPSG:4326',//目标坐标系
          featureProjection: 'EPSG:900913'  //当前坐标系
        });
        this.positionVisible.v = false;
        this.$Bus.$emit('coordinate', wkt);
        source.clear();
        this.type = '';
        this.featureArray = [];
      }
    },
    mounted() {

    },
    watch: {
      type: function () {
        this.map.removeInteraction(draw);
        this.addInteraction();
      },
    },
    created() {
      this.$Bus.$on('positionVisible.v', (e) => {
        this.positionVisible.v = e;
      });
    }
  }
</script>

<style>
  @import "../../../static/css/ol-debug.css";

  #map {
    padding-top: 20px;
  }

  .form-inline {
    margin-top: 10px;
  }

  .el-dialog__body {
    height: 95%;
    padding: 0px 20px 20px 20px;
  }

  .el-dialog__header {
    height: 5%;
    font-size: 16px;
    padding: 10px;
  }

  .el-dialog__headerbtn {
    top: 15px;
  }

  .custom-mouse-position {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    color: black;
    font-size: medium;
  }

  .custom-rotate {
    top: 0.5em;
    left: 2.2em;
  }

  .custom-overview-map {
    bottom: -1em;
    left: -1em;
    padding: .4em;
    background: white;
    width: 20%
  }

  .custom-fullscreen {
    left: 2.2em;
    top: 2.18em;
  }

  .custom-zoom-extent {
    top: 3.75em;
    left: 0.5em;
  }

  .custom-scale-line {
    left: 0.5em;
    bottom: 0em;
  }

  .map-div {
    /*height: 500px;*/
  }
</style>
